<!--  -->
<template>
  <div id="home">
      <!-- 导航栏 -->
      <navbar class="home_navbar">
        <template v-slot:center><div class="navbar_center">购物街</div></template>
      </navbar>
      <tabcontrol :itemtitle="['流行','新款','精选']"  
                  @tabClick="tabClick" 
                  ref="tab_control1" 
                  v-show="isShowTab"
                  :class="{tab_control:isShowTab}"/> 
      <bscroll class="content" ref="bscroll" @scroll="contentScroll" @pullingUp="loadmore" :probeType="3" :pullUpLoad="true">
        <!-- 轮播图 -->
        <swiper :banners="banners" class="swiper" @imageLoad="imageLoad"></swiper>
        <recommend :recommends="recommends"></recommend>
        <!-- 本周流行 -->
        <div class="featureView"><a href="https://act.mogujie.com/zzlx67"><img src="~assets/img/home/recommend_bg.jpg" alt=""></a></div>
        <tabcontrol :itemtitle="['流行','新款','精选']" @tabClick="tabClick" ref="tab_control2"/>   
        <goods :goods="goods[currentTabType].list"></goods>
      </bscroll>
      <backtop @click.native="backClick" v-show="isShowBackTop"></backtop>

  </div>
</template>

<script>
import navbar from 'components/common/navbar/NavBar.vue'
import swiper from './Swiper'
import recommend from './Recommend.vue'
import tabcontrol from 'components/context/tabcontrol/tabControl.vue'
import goods from 'components/context/goods/goods.vue'
import bscroll from 'components/common/bscroll/BScroll.vue'

import {getHomeMultidata ,getHomeData} from 'network/home.js'
import {backTopMixin} from 'common/mixin.js'

export default {
  data () {
    return {
      banners:[],
      recommends:[],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]}
      },
      currentTabType:'pop',
      tabOffsetTop:0,
      isShowTab:false,
      saveY:0
    }
  },
  components:{
    navbar,
    swiper,
    recommend,
    tabcontrol,
    goods,
    bscroll
  },
  mixins:[backTopMixin],
  created() {
    this.getHomeMultidata()
    this.getHomeData('pop')
    this.getHomeData('new')
    this.getHomeData('sell')
  },
  mounted(){
    this.$bus.on('itemLoad', () => {
      this.$refs.bscroll.refresh()
    })
  },
  activated() {
    this.$refs.bscroll.scrollTo(0 , this.saveY ,0)
    this.$refs.bscroll.refresh()
  },
  deactivated() {
    this.saveY = this.$refs.bscroll.bscroll.y
  },
  methods:{
    contentScroll(position) {
      // console.log(position);
      this.isShowBackTopFunc(position);
      this.isShowTab = -position.y > (this.tabOffsetTop + 40)
    },
    loadmore() {
      this.getHomeData(this.currentTabType)
      this.$refs.bscroll.refresh()
    },
    imageLoad() {
      this.tabOffsetTop = this.$refs.tab_control2.$el.offsetTop
    },
    // 切换显示数据方法
    tabClick(index) {
        switch(index){
          case 0:
            this.currentTabType = 'pop'
            break
          case 1:
            this.currentTabType = 'new'
            break
          case 2:
            this.currentTabType = 'sell'
        }
        this.$refs.tab_control1.currentItem = index
        this.$refs.tab_control2.currentItem = index
    },

    // 请求数据相关方法
    getHomeMultidata() {
      getHomeMultidata().then(res => {
      this.banners=res.data.data.banner.list
      this.recommends=res.data.data.recommend.list
      // console.log(res);
    })
    },
    getHomeData(type) {
      const page = this.goods[type].page + 1
      getHomeData(type,page).then(res => {
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list)
        this.goods[type].page += 1
        this.$refs.bscroll.bscroll.finishPullUp()

    })
    }
  }
}
</script>

<style>
  #home{
    height: 100vh;
    position: relative;
  }
  .home_navbar{
    /* position:fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
    color: #fff;
    background-color: var(--color-tint);
    font-size: 16px;
    
  }
  .swiper{
    margin-top: 44px;
  }
  .featureView img{
    width: 100%;
  }
  .tab_control{
    position: relative;
    z-index: 9;
  }
  /* .content{
    height: calc(100% - 93px);
    overflow: hidden;
    
  } */
  .content{
    overflow: hidden;
    height: calc(100vh - 93px); 
    position: absolute;
    top: 44px;
    bottom: 49x;
    right: 0;
    left: 0;
  }
</style>
